<template>
  <div>
    <h1>App</h1>
    <input type="text" ref="mes" />
    <button @click="showMes">展示输入框的内容</button>
    <hr />
    <Header ref="header" />
    <button @click="handler">按钮</button>
  </div>
</template>

<script>
import Header from "./components/Header";
export default {
  name: "App",
  components: {
    Header,
  },
  methods: {
    showMes() {
      /* 
        ref属性 
          * 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件实例的 $refs 对象上
          * 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素(如果以后考虑获取真实DOM则可以使用ref)
          * 如果用在子组件上，引用就指向组件实例,其实也是未来组件通信的一种方式
          * 注意事项:
             - 因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！
             - $refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
      */
      console.log(this);
      console.log(this.$refs.mes);
      console.log(this.$refs.mes.value);
    },
    handler() {
      console.log(this.$refs.header);
      this.$refs.header.count++;
    },
  },
};
</script>

<style></style>
